<template>
    <view class="content">
        <a-demo title="基础使用">
            <view class="a-code-input-4">
                <pure-code-input count="4" @complete="handleComplete" ref="pureCodeInputRef"></pure-code-input>
            </view>
        </a-demo>

        <a-demo title="自定义长度">
            <view class="a-code-input-6">
                <pure-code-input count="6" @complete="handleComplete" ref="pureCodeInputRef6"></pure-code-input>
            </view>
        </a-demo>

        <input type="text" />
    </view>
</template>

<script setup>
    import { ref } from "vue";
    import { onReady } from "@dcloudio/uni-app";

    // refs
    const pureCodeInputRef = ref();
    const pureCodeInputRef6 = ref();

    // 输入完成
    function handleComplete(code) {
        uni.showToast({
            title: `输入完成，验证码为：${code}`,
            icon: "none",
        });
    }

    onReady(() => {
        setTimeout(() => {
            pureCodeInputRef.value.setCode("6688");
        }, 2500);

        // 聚焦
        setTimeout(() => {
            pureCodeInputRef6.value.setFocus();
        }, 3500);
    });
</script>

<style scoped>
    .a-code-input-4 {
        padding: 10px 60px;
    }

    .a-code-input-6 {
        padding: 10px 30px;
    }
</style>
